<template>
	<view class="bg-white page-box">
		<view class="form-box">
			<view class="form-label-iten flex align-center">
				<view class="label-name">预约姓名:</view>
				<view class="label-value"><input type="text" v-model="name"></view>
			</view>
			<view class="form-label-iten flex align-center">
				<view class="label-name">预约电话:</view>
				<view class="label-value"><input type="number" v-model="mobile"></view>
			</view>
			<view class="form-label-iten flex align-center">
				<view class="label-name">来院时间:</view>
				<view class="label-value">
					<picker mode="date" @change="changeDate">
						<view class="flex align-center">
							<view class="picker-value">{{yuyue}}</view>
							<view class="picker-icon"><image src="@/static/images/bottom.png" mode="widthFix"></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="form-label-iten flex align-center">
				<view class="label-name">预约医生:</view>
				<view class="label-value">
					<picker mode="selector" :range="doctorList" range-key="name" @change="changeDoctor">
						<view class="flex align-center">
							<view class="picker-value">{{doctorIndex==-1?'请选择医生':doctorList[doctorIndex].name}}</view>
							<view class="picker-icon"><image src="@/static/images/bottom.png" mode="widthFix"></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="form-label-iten flex align-center">
				<view class="label-name">预约项目:</view>
				<view class="label-value">
					<picker mode="selector" :range="projectList" range-key="name" @change="changeProject">
						<view class="flex align-center">
							<view class="picker-value">{{projectIndex==-1?'请选择项目':projectList[projectIndex].name}}</view>
							<view class="picker-icon"><image src="@/static/images/bottom.png" mode="widthFix"></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="form-label-iten flex align-center">
				<view class="label-name">需求描述:</view>
				<view class="label-value"><input type="text" v-model="desc"></view>
			</view>
			<view class="form-label-iten flex align-center">
				<view class="label-name">挂号费:</view>
				<view class="label-value"><input type="digit" v-model="money" disabled></view>
			</view>
		</view>
		
		<view class="btm-box px-2">
			<view class="btn-submit" @click="submit">在线挂号</view>
		</view>
	</view>
</template>

<script>
	import {postRegisteredSubmit,postProjectList,postExpertAll} from '@/api/expert.js'
	export default {
		data() {
			return {
				yuyue:'请选择来院时间',
				name:'',
				mobile:'',
				desc:'',
				money:0,
				doctorList:[],
				doctorIndex:-1,
				projectList:[],
				projectIndex:-1
				
			}
		},
		onShow() {
			this.getExpert()
			this.getProject()
		},
		methods: {
			//获取专家列表
			getExpert(){
				postExpertAll().then(res=>{
					this.doctorList=res.data
				})
			},
			//获取项目列表
			getProject(){
				postProjectList().then(res=>{
					this.projectList=res.data
				})
			},
			//选择日期
			changeDate(e){
				this.yuyue=e.detail.value
			},
			//选择医生
			changeDoctor(e){
				this.doctorIndex=e.detail.value
			},
			//选择项目
			changeProject(e){
				this.projectIndex=e.detail.value
			},
			//提交
			submit(){
				if(this.doctorIndex==-1){
					this.$u.toast('请选择医生');
					return
				}
				if(this.projectIndex==-1){
					this.$u.toast('请选择项目');
					return
				}
				var data={
					yuyue:this.yuyue,
					name:this.name,
					mobile:this.mobile,
					desc:this.desc,
					money:this.money,
					doctor:this.doctorList[this.doctorIndex].name,
					project:this.projectList[this.projectIndex].name
				}
				postRegisteredSubmit(data).then(res=>{
					if(res.code==1){
						this.yuyue='请选择来院时间'
						this.name=''
						this.mobile=''
						this.desc=''
						this.money=''
						this.doctorIndex=-1
						this.projectIndex=-1
					}
					this.$u.toast(res.msg);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-box {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: scroll;
}
.form-box {
	padding: 0 20rpx;
	.form-label-iten {
		width: 100%;
		border-bottom: solid 1rpx #F6F6F6;
		padding: 46rpx 0 23rpx;
		.label-name {
			font-size: 34rpx;
			font-weight: bold;
			color: #1C1C1C;
			line-height: 1;
			flex-shrink: 0;
			margin-right: 38rpx;
		}
		.label-value {
			width: 100%;
			flex: 1;
			input {
				width: 100%;
			}
			picker {
				.picker-value {
					font-size: 34rpx;
					color: #9B9B9B;
					font-weight: bold;
					margin-right: 21rpx;
					min-width: 200rpx;
				}
				.picker-icon {
					width: 36rpx;
					image {
						width: 100%;
					}
				}
			}
		}
	}
}
.btm-box {
	margin-top: 175rpx;
	.btn-submit {
		width: 100%;
		height: 98rpx;
		background: #C11559;
		border-radius: 49rpx;
		color: white;
		font-size: 40rpx;
		line-height: 98rpx;
		text-align: center;
		font-weight: 500;
		margin-bottom: 273rpx;
	}
}
</style>
